<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用内联样式</title>
  <script src="../Vue.js"></script>

</head>
<body>
<div id="app">

<!--&lt;!&ndash;第一种 运用对象 直接引用   如果属性中有 “-” 符号，则必须加上 ''   符号&ndash;&gt;-->
  <h1 :style=" {  color : 'red' , 'font-weight' : '200' } ">这又是一个很大的h1 使用的是内联样式</h1>

<!--&lt;!&ndash;  第二种  将样式放到data中&ndash;&gt;-->
<!--  <h1 :style="styleObj ">这又是一个很大的h1 使用的是内联样式</h1>-->

<!--  第三种， 运用两个在vue中的样式时，运用数组-->
<!--  <h1 :style="[ styleObj, styleObj1] ">这又是一个很大的h1 使用的是内联样式</h1>-->

</div>

<script>
  new Vue({
    el : '#app',
    data: {
        styleObj : {  color : 'red' , 'font-weight' : 200 },
      styleObj1 : { 'font-style' : 'italic'}

    }


    }
  )
</script>
</body>
</html>
